<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500 - 服务器错误</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .error-container {
            text-align: center;
            padding: 2rem;
            max-width: 800px;
        }
        
        .error-code {
            font-size: 120px;
            font-weight: bold;
            color: #6f42c1;
            margin-bottom: 1rem;
            line-height: 1;
        }
        
        .error-title {
            font-size: 24px;
            color: #343a40;
            margin-bottom: 1rem;
        }
        
        .error-message {
            color: #6c757d;
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .error-details {
            text-align: left;
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            display: none; /* 默认隐藏 */
        }
        
        .error-details.visible {
            display: block;
        }
        
        .error-details pre {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            color: #e83e8c;
        }
        
        .error-details h3 {
            color: #343a40;
            margin-bottom: 1rem;
        }
        
        .back-home {
            display: inline-block;
            padding: 12px 24px;
            background-color: #6f42c1;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .back-home:hover {
            background-color: #553098;
        }
        
        .retry-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-left: 10px;
        }

        .retry-button:hover {
            background-color: #218838;
        }
        
        .toggle-details {
            display: inline-block;
            padding: 8px 16px;
            background-color: #6c757d;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-top: 1rem;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        .toggle-details:hover {
            background-color: #5a6268;
        }
        
        .error-meta {
            margin-top: 1rem;
            color: #6c757d;
            font-size: 14px;
        }
        
        .error-meta div {
            margin: 0.5rem 0;
        }
        
        .illustration {
            max-width: 300px;
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <div class="error-container">
        <svg class="illustration" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 9V11M12 15H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0377 2.66667 10.2679 4L3.33975 16C2.56998 17.3333 3.53223 19 5.07183 19Z" stroke="#6f42c1" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <div class="error-code">500</div>
        <h1 class="error-title">服务器内部错误</h1>
        <p class="error-message">
            抱歉，服务器遇到了一些问题。
            我们的技术团队已经收到这个错误报告，并正在积极解决。
        </p>
        
        {% if config.DEBUG %}
        <button class="toggle-details" onclick="toggleErrorDetails()">
            显示/隐藏错误详情
        </button>
        
        <div class="error-details" id="errorDetails">
            <h3>错误详情</h3>
            {% if error %}
                <div class="error-meta">
                    <div><strong>错误类型:</strong> {{ error.__class__.__name__ }}</div>
                    <div><strong>错误描述:</strong> {{ error }}</div>
                    {% if error.code %}<div><strong>状态码:</strong> {{ error.code }}</div>{% endif %}
                </div>
                
                {% if error.__traceback__ %}
                <h3>堆栈跟踪</h3>
                <pre>{{ error_traceback }}</pre>
                {% endif %}
            {% endif %}
        </div>
        {% endif %}
        
        <div style="margin-top: 2rem;">
            <a href="/" class="back-home">返回首页</a>
            <a href="javascript:window.location.reload();" class="retry-button">重试</a>
        </div>
    </div>

    <script>
        function toggleErrorDetails() {
            const details = document.getElementById('errorDetails');
            details.classList.toggle('visible');
        }
    </script>
</body>
</html>